<template>
	<view class="page">
		<div class="search-container clearfix">
			<img src="../../static/magnifier.png" class="magnifier" alt=""/>
			<input type="text" class="search-input" placeholder="输入要检索的员工姓名" v-model="keyword">
			<button class="search-button" @click="loadData()">查询员工</button>
		</div>
		
		<block v-for="dept in list" :key="dept.id">
			<view class="list-title">{{dept.deptName}}（{{ dept.count }}人）</view>
			<view class="item" v-for="member in dept.members" :key="member.userId">
				<view class="key">{{member.name}}</view>
				<img src="../../static/icon-2.png" class="value" alt=""/>
			</view>
		</block>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [],
			members: [],
			keyword: ''
		};
	},
	onShow:function(){
		this.loadData()
	},
	methods: {
		loadData:function(){
			let ref = this
			ref.ajax(ref.url.searchUserGroupByDept,"POST",{keyword:ref.keyword},function(resp){
				let result=resp.data.result
				ref.list=result
			})
		}
	}
};
</script>

<style lang="less">
	@import url('contacts.less');
</style>
